<template>
	<view class="ray-list content">
		<popup-active :visible.sync="showHonor" :popScreenList="popScreenList"></popup-active>
		<view class="ray-list__header fixed">
			<view class="search-bar">
				<!-- #ifdef MP-WEIXIN -->
				<uni-icons class="button" type="scan" size="24" @click="scanCode" style="margin-right: 24rpx;"></uni-icons>
				<!-- #endif -->
				<uni-search-bar :radius="30" @confirm="searchAction" cancelButton="none" @input="searchAction" v-model="searchValue"></uni-search-bar>
				<button type="default" class="search-text" @click="searchAction(searchValue)">搜索</button>
			</view>
			<wuc-tab :tab-list="tabList" :tabCur.sync="nodeType" tab-class="tabs" select-class="tab-selected" textFlex @change="tabChange"></wuc-tab>
		</view>
		<view class="ray-list__body list-panel" style="margin-top: 174rpx;">
			<view class="list-view">
				<div class="activity-item" v-for="(item, index) in list" :key="index">
					<view @click="goToActivityDetail(item)">
						<image :src="item.activityPic" mode="aspectFill"></image>
						<view class="tip">{{ item | getStatus }}</view>
						<view class="title">{{ item.activityName }}</view>
						<view v-for="(i, index) in item.timeAddressList" :key="index">
							<view class="list-item">报名时间：{{ i.activityTime }}</view>
							<view class="list-item" v-if="i.activityAddress">活动地点：{{ i.activityAddress }}</view>
						</view>
					</view>
					<view class="attention">
						<view @click.stop="handleClick(item)">
							<image class="editeImage" :src="thumbsImgHeart" v-if="item.isLike == '2'" />
							<image class="editeImage" :src="thumbsImgYellow" v-else />
						</view>
						<text class="attentionText">{{ item.likeNum }}</text>
					</view>
				</div>
			</view>
		</view>
		<view class="ray-list__foot"><mix-load-more :status="loading"></mix-load-more></view>
	</view>
</template>

<script>
import http from '../../common/request.js';
import popupActive from '@/components/popup-activity/popup-activity.vue';
import WucTab from '@/components/wuc-tab/wuc-tab.vue';
import mixLoadMore from '@/components/mix-load-more/mix-load-more';
import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue';
import { authorTodo } from '@/common/utils.js';
export default {
	created() {},
	components: {
		uniSearchBar,
		WucTab,
		mixLoadMore,
		popupActive
	},
	data() {
		return {
			popScreenList: [],
			showHonor: false,
			thumbsImgHeart: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/heart_empty.png',
			thumbsImgYellow: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/hm-follow-card/images/yellow.png',
			searchValue: '',
			tabList: [
				{
					name: '全部',
					status: undefined
				},
				{
					name: '未开始',
					status: 3
				},
				{
					name: '进行中',
					status: 1
				},
				{
					name: '已结束',
					status: 2
				}
			],
			nodeType: 0,
			pageNum: 1,
			pageSize: 5,
			allowRequest: true,
			loading: 0,
			list: [],
			oldData: {}
		};
	},
	// onShow() {
	// 	this.tabChange(this.nodeType);
	// },
	mounted() {
		this.tabChange(this.nodeType);
	},
	onReachBottom() {
		this.loadData();
	},
	onPullDownRefresh() {
		this.reset();
		this.loadData();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	filters: {
		getStatus(item) {
			const { activityStartTime, activityEndTime } = item;
			const now = Date.now();
			if (activityStartTime > now) {
				return '未开始'
			} else if (activityEndTime < now) {
				return '已结束'
			} else {
				return '进行中'
			}
		}
	},
	methods: {
		scanCode() {
			authorTodo({
				type: 'camera', 
				callback: () => {
					uni.scanCode({
						onlyFromCamera: true,
						success: function(res) {
							const data = JSON.parse(res.result);
							http('/api/activity/signIn', { data: { activityId: data.activityId, sessionId: data.sessionId }, method: 'POST' }).then(
								result => {
									uni.showToast({
										title: result.msg,
										icon: 'none'
									});
								}
							);
						}
					});
				}
			})
		},
		searchAction(e) {
			if (typeof e == 'string') {
				this.input(e);
			} else {
				this.input(e.value);
			}
		},
		input(value) {
			if (this.timer) {
				clearTimeout(this.timer);
			}
			this.timer = setTimeout(() => {
				this.searchValue = value;
				this.reset();
				this.loadData(); //通过apply还原this指向事件
			}, 1000);
		},
		reset() {
			//重置查询第一页
			this.pageNum = 1;
			this.allowRequest = true;
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
			this.list = [];
		},
		getParameters() {
			const { searchValue, tabList, nodeType, pageNum, pageSize } = this;
			const result = { pageNum, pageSize, searchValue };
			const key = tabList[nodeType].status;
			if (key !== undefined) {
				result.status = key;
			}
			if (searchValue !== undefined) {
				result.search = searchValue;
			}
			return result;
		},
		loadData(flag) {
			const { list, pageNum, pageSize, allowRequest } = this;
			if (!allowRequest) {
				return;
			}
			this.loading = 1;
			http('/api/activity/appActivityList', { data: { ...this.getParameters() }, method: 'GET' }).then(
				result => {
					if (result.code === 200) {
						const list = result.data || [];
						this.allowRequest = result.total / pageSize > pageNum;
						if (this.allowRequest) {
							this.loading = 0;
						} else {
							this.loading = 2;
						}
						this.pageNum++;

						this.list = this.list.concat(list);
						this.loading = this.list.length === 0 ? 3 : this.loading;
					} else {
						this.loading = 0;
					}
				},
				result => {
					this.loading = 3;
				}
			);
		},
		tabChange(index) {
			this.nodeType = index;
			this.reset();
			this.loadData();
		},
		handleClick(item) {
			let url = '';
			if (item.isLike == '2') {
				url = 'api/activity/dataIncr'; // 点赞
			} else {
				url = 'api/activity/dataDecr'; // 取消点赞
			}
			http(url, {
				method: 'post',
				data: {
					activityId: item.activityId
				}
			}).then(result => {
				if (result.code === 200) {
					const data = result.data || {};
					item.likeNum = data.count || 0;
					item.isLike = data.isLike;
					const list = result.popScreen || [];
					if (list.length > 0) {
						this.showHonor = true;
						this.popScreenList = list;
					}
				}
			});
		},
		updateChild (cont, type) {
			this.oldData.isLike = type
			this.oldData.likeNum = cont
		},
		goToActivityDetail(data) {
			this.oldData = data			
			const { activityId, activityName, activityStatus } = data;
			//埋点
			this.$umaTrackEvent('activity', { activityId, activityName, source: '活动页' });
			uni.navigateTo({
				url: '/activity/info/index?activityId=' + data.activityId + '&activityStatus=' + data.activityStatus,
				animationType: 'pop-in',
				animationDuration: 200
			});
		}
	}
};
</script>

<style lang="less" scoped>
.search-bar {
	display: flex;
	padding: 20rpx 40rpx;
	align-items: center;
	justify-content: space-between;
	// #ifdef MP-WEIXIN
	/deep/uni-search-bar {
		flex-grow: 1;
		.uni-searchbar {
			flex-grow: 1;
			padding: 0;
		}
	}
	// #endif
	// #ifdef H5
	/deep/.uni-searchbar {
		flex-grow: 1;
		padding: 0;
	}
	// #endif
	.search-text {
		padding: 16rpx 0 16rpx 26rpx;
		color: #66645d;
		font-size: 26rpx;
		margin: 0;
		background-color: transparent;
		line-height: 1;
	}
}
.tabs {
	color: rgba(138, 140, 141, 1);
	font-size: 26rpx;
	background: #ffffff;
}

.tab-selected {
	font-weight: 400;
	color: rgba(102, 100, 93, 1);
	position: relative;
	border-bottom: 0 !important;
	&::after {
		width: 40rpx;
		height: 6rpx;
		background: rgba(102, 100, 93, 1);
		border-radius: 5rpx;
		display: block;
		position: absolute;
		bottom: 0;
		content: '';
		left: 40%;
	}
}

.attention {
	display: flex;
	justify-content: flex-end;
	padding: 16rpx 24rpx 0rpx;
	color: rgba(178, 177, 174, 1);
	align-items: center;

	image {
		width: 30rpx !important;
		height: 30rpx !important;
		// margin-bottom: 0rpx;
		// margin-right: 10rpx;
		// margin-left: 30rpx;
		margin: 0rpx 10rpx 34rpx 100rpx;
	}
	text {
		margin-bottom: 34rpx;
	}
}

.attention-icon {
	margin-right: 14rpx;
}

.attentionText {
	font-size: 24rpx;
}

.activity-item image {
	border-radius: 12rpx 12rpx 0 0;
	// width: 670rpx;
	width: 100%;
	height: 251rpx;
}

.activity-item .title {
	font-size: 30rpx;
	font-weight: 500;
	color: #66645d;
	line-height: 42rpx;
	padding: 0 24rpx;
	margin-top: 21rpx;
	margin-bottom: 11rpx;
	font-family: PingFangSC-Medium, PingFang SC;
}
.tip {
	width: 120rpx;
	height: 40rpx;
	line-height: 40rpx;
	text-align: center;
	color: #fff;
	background: #f39800;
	font-size: 24rpx;
	position: absolute;
	left: 0;
	top: 36rpx;
}
.activity-item .list-item {
	font-size: 26rpx;
	font-weight: 400;
	color: rgba(138, 140, 141, 1);
	// margin-bottom: 12rpx;
	line-height: 44rpx;
	padding: 0 24rpx;
}

.activity-item {
	margin: 24rpx 40rpx 0;
	border-radius: 12rpx;
	background: #ffffff;
	position: relative;
}
</style>
